<template>
  <view class="bg-[#060606] min-h-screen overflow-hidden order-list" :style="themeColor()">
    <view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
      <scroll-view scroll-x="true" class="scroll-Y box-border px-[30rpx] bg-white">
        <view class="flex whitespace-nowrap justify-between">
          <view :class="['text-[28rpx] leading-[90rpx]', { 'class-select': orderState === item.status.toString() }]" @click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
        </view>
      </scroll-view>
    </view>

    <mescroll-body ref="mescrollRef" top="90rpx" @init="mescrollInit" :down="{ use: false }" @up="getShopOrderFn">
      <view class="mx-[30rpx] mt-[20rpx]" v-if="list.length">
        <template v-for="(item, index) in list" :key="index">
          <view class="mb-[20rpx] bg-[#fff] p-[20rpx] rounded-[16rpx]">
            <view>
              <view class="flex justify-between items-center">
                <view class="text-[#303133] text-[28rpx] font-400 leading-[30rpx]">{{ t('orderNo') }}：{{ item.order_no }}</view>
                <view class="text-[#EF900A] text-[28rpx]">{{ item.status_name.name }}</view>
              </view>
              <view class="flex box-border mt-[30rpx]" v-for="(subitem, index) in item.order_goods" :key="index">
                <view class="w-[150rpx] h-[150rpx]">
                  <u--image class="rounded-[10rpx] overflow-hidden" width="150rpx" height="150rpx" :src="img(subitem.goods_image_thumb_small ? subitem.goods_image_thumb_small : '')" model="aspectFill">
                    <template #error>
                      <image class="rounded-[10rpx] overflow-hidden w-[150rpx] h-[150rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                    </template>
                  </u--image>
                </view>
                <view class="ml-[20rpx] flex flex-1 flex-col justify-between box-border">
                  <view>
                    <text class="text-[28rpx] text-item  leading-[40rpx] text-[#303133]">{{ subitem.goods_name }}</text>
                    <view  v-if="subitem.sku_name">
                      <view class="text-[24rpx] truncate mt-[10rpx] text-[#999] leading-[28rpx] max-w-[480rpx]">{{ subitem.sku_name }}</view>
                    </view>
                  </view>
                  <view class="flex justify-between items-center text-[#303133]">
                    <view class="text-right leading-[28rpx] price-font">
                      <text class="text-[24rpx]">￥</text>
                      <text class="text-[32rpx] font-500">{{parseFloat(subitem.price).toFixed(2).split('.')[0] }}</text>
                      <text class="text-[22rpx] font-500">.{{parseFloat(subitem.price).toFixed(2).split('.')[1] }}</text>
                    </view>
                    <text class="text-right text-[26rpx]">x{{ subitem.num }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="flex justify-between items-center  mt-[20rpx]">
              <text class="text-[#666] text-[24rpx]">{{ item.create_time }}</text>
              <view class="flex items-center">

                <view class="text-[#999] text-[22rpx] mr-[4rpx]">购买人：</view>
                <text class="text-[36rpx] font-500">{{ item.member.nickname  }}</text>

                <!--                <view class="text-[#999] text-[22rpx] mr-[4rpx]">{{ t('actualPayment') }}：</view>-->
                <!--                <view class="text-[var(&#45;&#45;price-text-color)] price-font">-->
                <!--                  <text class="text-[26rpx]">￥</text>-->
                <!--                  <text class="text-[36rpx] font-500">{{ parseFloat(item.order_money).toFixed(2).split('.')[0]  }}</text>-->
                <!--                  <text class="text-[24rpx] font-500">.{{ parseFloat(item.order_money).toFixed(2).split('.')[1]  }}</text>-->
                <!--                </view>-->

              </view>
            </view>
            <!--            <view class="flex justify-end text-[28rpx] mt-[20rpx] items-center" v-if="item.status == 2">-->
            <!--              <view-->
            <!--                  class="inline-block text-[24rpx] leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[#999] rounded-full text-[#303133] box-border"-->
            <!--                  @click.stop="orderFahuoBtnFn(item)">发货</view>-->
            <!--            </view>-->
          </view>
        </template>
      </view>
      <view class="mx-[30rpx] mt-[20rpx] rounded-[16rpx] flex items-center justify-center noData" v-if="!list.length && loading">
        <mescroll-empty :option="{tip : '暂无订单'}"></mescroll-empty>
      </view>
    </mescroll-body>
    <!-- 发货 -->
    <!--    <u-popup :zIndex="10075" :show="fahuoPopup" :round="16" mode="center" :closeable="true" @close="fahuoPopup = false" :closeOnClickOverlay="false">-->
    <!--      <view class="pt-[30rpx] px-[32rpx] pb-[20rpx]">-->
    <!--        <view class="text-center text-[32rpx] font-700 text-[#323233]">发货</view>-->
    <!--        <scroll-view :scroll-y="true" class="my-[20rpx] w-[100%] overflow-auto">-->
    <!--          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]" @click="companySheetShow = true">-->
    <!--            <view v-if="!formData.company_name" class="text-gray-placeholder text-[28rpx] flex-1">请选择快递公司</view>-->
    <!--            <view v-else class="text-[28rpx] flex-1">{{ formData.company_name }}</view>-->
    <!--          </view>-->
    <!--          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">-->
    <!--            <u-input fontSize="28rpx" v-model="formData.number" border="none" clearable maxlength="25" :placeholder="'请输入配送单号'"/>-->
    <!--          </view>-->
    <!--        </scroll-view>-->
    <!--        <view class="flex items-center justify-between">-->
    <!--          <button class="primary-btn-bg px-[20rpx] h-[55rpx] text-[#fff] text-[28rpx] border-[2rpx] leading-[55rpx] rounded-[50rpx]" shape="circle" @click="fahuoFn()">确定</button>-->
    <!--          <button class="px-[20rpx] h-[55rpx] text-[#000] text-[28rpx] leading-[55rpx] rounded-[50rpx] border-[2rpx] border-solid border-[#8288A2]" shape="circle" @click="fahuoPopup = false">取消</button>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--    </u-popup>-->
    <!-- 快递公司 -->
    <!--    <u-action-sheet :zIndex="10076" :cancelText="'取消'" :actions="companyList" :show="companySheetShow"-->
    <!--                    :safeAreaInsetBottom="true"-->
    <!--                    @close="companySheetShow = false" @select="updateCompany"></u-action-sheet>-->
  </view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import {language, t} from '@/locale'
import { img, redirect } from '@/utils/common';
import {getShopOrderStatus} from '@/addon/shop/api/order';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useConfigStore from "@/stores/config";
// import {myGoodsOrderList ,myGoodsOrderFahuo,expressCompanyList} from "@/addon/ershou/api/esgoods";
import { myRebateOrderList } from "@/addon/jiangsu_shop/api/rebate";

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(false);
const statusLoading = ref<boolean>(false);
const orderState = ref('')
const orderStateList = ref([]);
const evaluateConfig = ref("")

const mch_id = ref('')
const isTradeManaged = ref(false)
const companySelect = ref([]);

onLoad((option) => {
  orderState.value = option.status || "";
  getShopOrderStatusFn();
  // if(companySelect.value.length == 0){
  //   expressCompanyList({}).then(res => {
  //     companySelect.value = [];
  //     Object.values(res.data).forEach((item, index) => {
  //       companySelect.value.push({ name: item.company_name, value: item.company_id });
  //     });
  //   })
  // }
});

const getShopOrderFn = (mescroll) => {
  loading.value = false;
  let data: object = {
    page: mescroll.num,
    limit: mescroll.size,
    status: orderState.value,
  };

  myRebateOrderList(data).then((res) => {
    console.log(res)
    let newArr = (res.data.data as Array<Object>);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    mescroll.endSuccess(newArr.length);

    mch_id.value = res.data.mch_id;
    isTradeManaged.value = res.data.is_trade_managed;
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}

const getShopOrderStatusFn = () => {
  statusLoading.value = false;
  orderStateList.value = [];
  let obj = { name: '全部', status: '' };
  orderStateList.value.push(obj);

  getShopOrderStatus().then((res) => {
    Object.values(res.data).forEach((item, index) => {
      orderStateList.value.push(item);
    });
    statusLoading.value = true;
  }).catch(() => {
    statusLoading.value = true;
  })
}

const orderStateFn = (status) => {
  orderState.value = status.toString();
  list.value = [];
  getMescroll().resetUpScroll();
};

// const fahuoPopup = ref(false)//发货弹窗
const orderInfo = ref('')//订单内容
// const orderFahuoBtnFn = (item:any) => {
//   fahuoPopup.value = true;
//   orderInfo.value = item;
//   formData.value.company_id=0;
//   formData.value.number='';
//   formData.value.company_name='';
// }
const formData = ref({
  company_id: 0,
  number: '',
  company_name:'',
})
// const fahuoFn = () => {
//   if(!formData.value.company_id){
//     uni.showToast({
//       title: '请选择快递公司',
//       icon: 'none'
//     });
//     return false;
//   }
//   if(!formData.value.number){
//     uni.showToast({
//       title: '请输入配送单号',
//       icon: 'none'
//     });
//     return false;
//   }
//   fahuoPopup.value = false;
//   myGoodsOrderFahuo({
//     order_id: orderInfo.value.order_id,
//     order_goods_ids: [orderInfo.value.order_goods[0].order_goods_id],
//     company_id:formData.value.company_id,
//     number:formData.value.number
//   }).then((data) => {
//     getMescroll().resetUpScroll();
//   })
// }

const companySheetShow = ref(false)
// const companyList = computed(() => {
//   return companySelect.value;
// })
/**
 * 选择快递公司
 */
// const updateCompany = (e) => {
//   companySheetShow.value = false;
//   formData.value.company_id = e.value;
//   formData.value.company_name = e.name;
// }
</script>
<style>
.order-list .mescroll-body {
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
:deep(.u-popup__content){
  width: 80% !important;
}
:deep(.u-action-sheet__cancel){
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.text-item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-color {
  color: var(--primary-color);
}

.bg-color {
  background-color: var(--primary-color);
}

.class-select {
  position: relative;
  font-weight: 500;
  color: var(--primary-color);
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    height: 4rpx;
    border-radius: 4rpx;
    background-color: var(--primary-color);
    width: 40rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
.noData{
  height: calc(100vh - 130rpx - constant(safe-area-inset-bottom));
  height: calc(100vh - 130rpx - env(safe-area-inset-bottom));
}
</style>
